<template>
  <view class="page-container">
    <!-- 自定义Header -->
    <CustomHeader></CustomHeader>
    
    <!-- 页头 -->
    <view class="header-nav">
      <view class="back-btn" @click="goBack">
        <image class="back-icon" src="/static/icons/candidate/pre_page.png"></image>
      </view>
      <view class="header-title">面试详情</view>
      <view class="header-right"></view>
    </view>

    <!-- 加载状态 -->
    <view v-if="loading" class="loading-container">
      <text class="loading-text">加载中...</text>
    </view>

    <!-- 面试详情内容 -->
    <view v-else-if="interviewDetail" class="content-container">
      <!-- 面试信息卡片 -->
      <view class="info-card">
        <!-- 面试状态标题 -->
        <view class="status-title">
          <text class="status-text">{{ getStatusText(interviewDetail.interviewProgress) }}</text>
        </view>
        <view class="card-title">面试信息</view>
        
        <!-- 面试时间 -->
        <view class="info-item">
          <view class="info-label">
            <image class="info-icon" src="/static/icons/hr/time.png"></image>
            <text class="label-text">面试时间</text>
          </view>
          <view class="info-value">
            <text class="value-text">{{ formatInterviewTime(interviewDetail.interviewTime) }}</text>
          </view>
        </view>

        <!-- 职位信息 -->
        <view class="info-item">
          <view class="info-label">
            <image class="info-icon" src="/static/icons/hr/position.png"></image>
            <text class="label-text">职位信息</text>
          </view>
          <view class="info-value">
            <text class="value-text">{{ interviewDetail.positionName }}</text>
          </view>
        </view>

        <!-- 联系电话 -->
        <view class="info-item">
          <view class="info-label">
            <image class="info-icon" src="/static/icons/hr/phone.png"></image>
            <text class="label-text">联系电话</text>
          </view>
          <view class="info-value">
            <text class="value-text">{{ interviewDetail.contactPhone }}</text>
          </view>
        </view>

        <!-- 备注信息 -->
        <view v-if="interviewDetail.remarks" class="info-item">
          <view class="info-label">
            <image class="info-icon" src="/static/icons/hr/remark.png"></image>
            <text class="label-text">备注信息</text>
          </view>
          <view class="info-value">
            <text class="value-text">{{ interviewDetail.remarks }}</text>
          </view>
        </view>

        <!-- 面试地址 -->
        <view class="info-item">
          <view class="info-label">
            <image class="info-icon" src="/static/icons/hr/address.png"></image>
            <text class="label-text">面试地址</text>
          </view>
          <view class="info-value">
            <text class="value-text">{{ interviewDetail.interviewAddress }}</text>
          </view>
        </view>
      </view>

      <!-- 面试进度卡片 -->
      <view class="progress-card">
        <view class="card-title">面试进度</view>
        
        <view class="progress-steps">
          <!-- 等待候选人接受面试 -->
          <view class="progress-step" :class="{ 'active': interviewDetail.interviewProgress >= 1, 'completed': interviewDetail.interviewProgress > 1 }">
            <view class="step-circle">
              <image v-if="interviewDetail.interviewProgress > 1" class="step-icon" src="/static/icons/chat/success.png"></image>
              <text v-else class="step-number">1</text>
            </view>
            <view class="step-content">
              <text class="step-title">等待候选人接受面试</text>
              <text class="step-desc">面试邀请已发送，等待候选人确认</text>
            </view>
          </view>

          <!-- 候选人已接受面试 -->
          <view class="progress-step" :class="{ 'active': interviewDetail.interviewProgress >= 2, 'completed': interviewDetail.interviewProgress > 2 }">
            <view class="step-circle">
              <image v-if="interviewDetail.interviewProgress > 2" class="step-icon" src="/static/icons/chat/success.png"></image>
              <text v-else class="step-number">2</text>
            </view>
            <view class="step-content">
              <text class="step-title">候选人已接受面试</text>
              <text class="step-desc">候选人确认参加面试</text>
            </view>
          </view>

          <!-- 候选人已拒绝面试 -->
          <view v-if="interviewDetail.interviewProgress === 3" class="progress-step rejected">
            <view class="step-circle">
              <image class="step-icon" src="/static/icons/chat/close.png"></image>
            </view>
            <view class="step-content">
              <text class="step-title">候选人已拒绝面试</text>
              <text class="step-desc">候选人拒绝参加面试</text>
            </view>
          </view>

          <!-- HR已取消面试 -->
          <view v-if="interviewDetail.interviewProgress === 4" class="progress-step cancelled">
            <view class="step-circle">
              <image class="step-icon" src="/static/icons/chat/close.png"></image>
            </view>
            <view class="step-content">
              <text class="step-title">HR已取消面试</text>
              <text class="step-desc">面试已被HR取消</text>
            </view>
          </view>

          <!-- 面试通过 -->
          <view v-if="interviewDetail.interviewProgress === 5" class="progress-step completed">
            <view class="step-circle">
              <image class="step-icon" src="/static/icons/chat/success.png"></image>
            </view>
            <view class="step-content">
              <text class="step-title">面试通过</text>
              <text class="step-desc">候选人面试通过</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 求职者操作按钮 -->
      <view v-if="showCandidateButtons" class="action-buttons">
        <button class="action-btn reject-btn" @click="rejectInterview">拒绝面试</button>
        <button class="action-btn accept-btn" @click="acceptInterview">接受面试</button>
      </view>
    </view>

    <!-- 错误状态 -->
    <view v-else class="error-container">
      <text class="error-text">加载失败，请重试</text>
      <button class="retry-btn" @click="loadInterviewDetail">重试</button>
    </view>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import CustomHeader from "@/components/CustomHeader.vue"
import { getInterviewDetailApi, acceptInterviewApi, refuseInterviewApi } from '@/api/chat.js'

// 页面参数
const interviewId = ref('')

// 数据状态
const loading = ref(false)
const interviewDetail = ref(null)

// 计算属性：是否显示求职者按钮
const showCandidateButtons = computed(() => {
  return interviewDetail.value && interviewDetail.value.interviewProgress === 1
})

// 页面加载
onLoad((options) => {
  interviewId.value = options.interviewId || ''
  if (interviewId.value) {
    loadInterviewDetail()
  }
})

// 加载面试详情
const loadInterviewDetail = async () => {
  if (!interviewId.value) return
  
  try {
    loading.value = true
    const response = await getInterviewDetailApi(interviewId.value)
    interviewDetail.value = response
  } catch (error) {
    console.error('获取面试详情失败:', error)
    uni.showToast({
      title: '获取面试详情失败',
      icon: 'none'
    })
  } finally {
    loading.value = false
  }
}

// 返回上一页
const goBack = () => {
  uni.navigateBack()
}

// 获取状态文本
const getStatusText = (progress) => {
  const statusMap = {
    1: '等待候选人接受面试',
    2: '候选人已接受面试',
    3: '候选人已拒绝面试',
    4: 'HR已取消面试',
    5: '面试通过'
  }
  return statusMap[progress] || '未知状态'
}

// 格式化面试时间
const formatInterviewTime = (timeStr) => {
  if (!timeStr) return '未设置'
  
  try {
    // 解析时间字符串 (yyyy-MM-dd HH:mm)
    const date = new Date(timeStr)
    const year = date.getFullYear()
    const month = String(date.getMonth() + 1).padStart(2, '0')
    const day = String(date.getDate()).padStart(2, '0')
    const hours = String(date.getHours()).padStart(2, '0')
    const minutes = String(date.getMinutes()).padStart(2, '0')
    
    return `${year}年${month}月${day}日 ${hours}:${minutes}`
  } catch (error) {
    return timeStr
  }
}

// 接受面试
const acceptInterview = () => {
  uni.showModal({
    title: '确认接受面试',
    content: '确定要接受这次面试邀请吗？',
    success: async (res) => {
      if (res.confirm) {
        try {
          await acceptInterviewApi(interviewId.value)
          uni.showToast({
            title: '已接受面试邀请',
            icon: 'success'
          })
          // 刷新页面数据
          await loadInterviewDetail()
        } catch (error) {
          console.error('接受面试失败:', error)
          uni.showToast({
            title: '操作失败，请重试',
            icon: 'none'
          })
        }
      }
    }
  })
}

// 拒绝面试
const rejectInterview = () => {
  uni.showModal({
    title: '确认拒绝面试',
    content: '确定要拒绝这次面试邀请吗？',
    success: async (res) => {
      if (res.confirm) {
        try {
          await refuseInterviewApi(interviewId.value)
          uni.showToast({
            title: '已拒绝面试邀请',
            icon: 'success'
          })
          // 刷新页面数据
          await loadInterviewDetail()
        } catch (error) {
          console.error('拒绝面试失败:', error)
          uni.showToast({
            title: '操作失败，请重试',
            icon: 'none'
          })
        }
      }
    }
  })
}
</script>

<style lang="scss" scoped>
.page-container {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 120rpx;
}

.header-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx 30rpx;
  height: 88rpx;
  background-color: #ffffff;
  border-bottom: 1rpx solid #f0f0f0;
}

.back-btn {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.back-icon {
  width: 48rpx;
  height: 48rpx;
}

.header-title {
  font-size: 36rpx;
  font-weight: 500;
  color: #333;
}

.header-right {
  width: 60rpx;
}

/* 加载状态 */
.loading-container {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 100rpx 0;
}

.loading-text {
  font-size: 32rpx;
  color: #999;
}

/* 内容容器 */
.content-container {
  padding: 30rpx;
}

/* 状态标题 */
.status-title {
  text-align: center;
  margin-bottom: 30rpx;
  padding-bottom: 20rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.status-text {
  font-size: 36rpx;
  font-weight: bold;
  color: #54cbc4;
}

/* 信息卡片 */
.info-card {
  background-color: #ffffff;
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}

.card-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 30rpx;
  padding-bottom: 20rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.info-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30rpx 0;
  border-bottom: 1rpx solid #f5f5f5;
  min-height: 80rpx;
}

.info-item:last-child {
  border-bottom: none;
}

.info-label {
  display: flex;
  align-items: center;
  gap: 16rpx;
  flex-shrink: 0;
}

.info-icon {
  width: 40rpx;
  height: 40rpx;
  flex-shrink: 0;
}

.label-text {
  font-size: 30rpx;
  color: #666;
  white-space: nowrap;
}

.info-value {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
  margin-left: 20rpx;
}

.value-text {
  font-size: 30rpx;
  color: #333;
  line-height: 1.4;
  text-align: right;
  word-break: break-all;
  flex: 1;
  max-width: 400rpx;
}

/* 进度卡片 */
.progress-card {
  background-color: #ffffff;
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}

.progress-steps {
  display: flex;
  flex-direction: column;
  gap: 40rpx;
}

.progress-step {
  display: flex;
  align-items: flex-start;
  gap: 24rpx;
  position: relative;
}

.progress-step:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 20rpx;
  top: 60rpx;
  width: 2rpx;
  height: 40rpx;
  background-color: #e0e0e0;
}

.progress-step.completed:not(:last-child)::after {
  background-color: #54cbc4;
}

.step-circle {
  width: 40rpx;
  height: 40rpx;
  border-radius: 50%;
  background-color: #e0e0e0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.progress-step.active .step-circle {
  background-color: #54cbc4;
}

.progress-step.completed .step-circle {
  background-color: #54cbc4;
}

.progress-step.rejected .step-circle {
  background-color: #ff4757;
}

.progress-step.cancelled .step-circle {
  background-color: #ffa502;
}

.step-number {
  font-size: 24rpx;
  font-weight: bold;
  color: #ffffff;
}

.step-icon {
  width: 24rpx;
  height: 24rpx;
}

.step-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8rpx;
}

.step-title {
  font-size: 32rpx;
  font-weight: 500;
  color: #333;
}

.step-desc {
  font-size: 26rpx;
  color: #666;
  line-height: 1.4;
}

/* 操作按钮 */
.action-buttons {
  display: flex;
  gap: 20rpx;
  padding: 0 30rpx;
}

.action-btn {
  flex: 1;
  height: 88rpx;
  border-radius: 44rpx;
  font-size: 32rpx;
  font-weight: bold;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.reject-btn {
  background-color: #ff4757;
  color: #ffffff;
}

.accept-btn {
  background-color: #54cbc4;
  color: #ffffff;
}

/* 错误状态 */
.error-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100rpx 0;
  gap: 30rpx;
}

.error-text {
  font-size: 32rpx;
  color: #999;
}

.retry-btn {
  background-color: #54cbc4;
  color: #ffffff;
  font-size: 28rpx;
  padding: 20rpx 40rpx;
  border-radius: 40rpx;
  border: none;
}
</style>

